<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_j0ppeqhqw7.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/my.css">
</head>
<body>
    <!-- 头部 -->
    <header class="w100p bg-base pb-10">
        <h1 class="fw-n fcc f16 fixed w100p bg-base pt-10">我的</h1>
        <div class="login pt-30 mb-20">
            <a class="flex aic ml-10" href="./login.html">
                <img src="./img/headshot.png" alt="">
                <p class="ml-15 f20 fw-b fff"  id="username-display">点击登陆注册</p>
            </a>
        </div>
        <!-- 服务 -->
        <ul class="service bg-fff ml-15 mr-15 fcc">
            <li class="guarantee pr-15">
                <i class="iconfont f20 icon-shu"></i>
                <p class="pt-10">正版绘本</p>
            </li>
            <li class="guarantee pr-15">
                <i class="iconfont f20 icon-xiaodu"></i>
                <p class="pt-10">深度消毒</p>
            </li>
            <li class="guarantee pr-15">
                <i class="iconfont f20 icon-tubiao_baoyou"></i>
                <p class="pt-10">双向包邮</p>
            </li>
        </ul>
    </header>

    <main>
        <!-- 会员服务 -->
         <div class="member bg-base m15">
            <a class="fcc fff" href="./member.html">
                <i class="iconfont icon-xiaoxiong f24"></i>
                <p class="ml-10 mr-10 fw-b">点击此处尊享会员服务</p>
                <i class="iconfont icon-xiaoxiong f24"></i>
            </a>
         </div>
        <!-- 订单 -->
        <div class="order m15 p15 bg-fff">
            <h2>订单</h2>
            <ul class="fcc fww">
                <li>
                    <a href="./dingdan.html"><i class="iconfont icon-daifahuo f22"></i></a>
                    <p class="pt-5 f14">代发货</p>
                </li>
                <li>
                    <a href="./dingdan.html"><i class="iconfont icon-liwu1 f22"></i></a>
                    <p class="pt-5 f14">待收货</p>
                </li>
                <li>
                    <a href="./dingdan.html"><i class="iconfont icon-daiguihuan f22"></i></a>
                    <p class="pt-5 f14">待归还</p>
                </li>

                <li>
                    <a href="./dingdan.html"><i class="iconfont icon-pinglun f22"></i></a>
                    <p class="pt-5 f14">待评论</p>
                </li>

            </ul>
        </div>
        <!-- 常用 -->
         <div class="used  m15 p15 bg-fff">
            <h2>常用</h2>
            <ul class="w100p">
                <li class="flex fcc fdc" style="width: 20%;">
                    <a href="./dingdan.html"><i class="iconfont icon-shouhuodizhi f24"></i></a>
                    <span class="pt-5 f14">收货地址</span>
                </li>
            </ul>
         </div>
    </main>

    <div style="height: 60px;"></div>
    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link active flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script>
        // 页面加载时检查（浏览器）sessionStorage 中是否有存储的用户名
        window.onload = function() {
            const username = sessionStorage.getItem('username');
            if (username) {
                document.getElementById('username-display').innerText = username; // 显示用户名
            }
        };
    </script>
</body>
</html>